{include file="common/header"}
<div id="app" v-cloak>
    <el-curd 
        :field="field" 
        :search-date="false" 
        :table-sort="{prop: 'id', order: 'asc'}"
        search-keyword="请输入角色名称搜索"
        save-title="新增角色权限"
        form-label-width="100px">
    </el-curd>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                field: [
                    {
                        label: '编号', 
                        prop: 'id',
                        table: false,
                    },
                    {
                        label: '角色名称', 
                        prop: 'title', 
                        table: {is: 'el-input', sort: true},
                        form:{
                            rules: [
                                {required: true,message: '名称不能为空'},
                            ]
                        }
                    },
                    {
                        prop: 'status', 
                        label: '角色状态',  
                        table: {is: 'el-switch', sort: true},
                        form: {
                            is: 'el-switch', 
                            default: 1,
                            rules: [
                                {required: true,message: '状态不能为空'},
                            ]
                        }
                    },
                    {
                        prop: 'role', 
                        label: '角色权限', 
                        table: false, 
                        form: {
                            is: 'el-tree-menu',
                            list: {:json_encode($menu)}, 
                            default: [],
                        },
                    }
                ]
            }
        },
    })
</script>
{include file="common/footer"}